<template>
  <div class="main">
    <!-- 搜索 -->
    <div class="sec">
      <input
        type="text"
        v-model="sec"
        @keyup.enter="secProject"
        placeholder="请输入你想搜索的项目关键字"
      />
      <el-button type="primary" icon="el-icon-search" @click="secProject" :loading="loading"
        >搜索</el-button
      >
    </div>
    <!-- 内容 -->
    <div class="home_list">
      <ul class="home-list" v-if="lis.length > 0">
        <Card
          v-for="li_data in lis"
          :key="li_data.id"
          :liData="li_data"
          :visible.sync="dialogFormVisible"
          :leaveWordProjectId.sync="leaveWordProjectId"
        />
      </ul>
      <div v-if="lis.length == 0" class="nullList">
        暂无与收藏项目，请去创新广场添加！
      </div>
      <el-dialog title="写留言" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="留言">
            <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelWriteLeaveWord">取 消</el-button>
          <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 分页 -->
    <div class="block" v-show="allDataLenght > 12 ? 1 : 0">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="12"
        layout="prev, pager, next, jumper"
        :total="allDataLenght"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//导入axios
import axios from "axios";
import Card from "../../components/Card";
export default {
  components: { Card },
  name: "InnCenter",
  data() {
    return {
      loading:false,
      sec: "",
      yeKeyWord: "",
      lis: [],
      Mycollect: [],
      allDataLenght: 0,
      ye: {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
      },
      dialogFormVisible: false,
      leaveWordProjectId: -1,
      form: {
        leaveWord: "",
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    collectProject(params) {
      console.log(params);
      this.lis.forEach((e, v) => {
        if (e.id == params) {
          this.lis[v].collect = !this.lis[v].collect;
        }
      });
    },
    //获取初始数据
    getData() {
      var token = localStorage.getItem("token");
      var t_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post("http://localhost:3000/teacher/myCollect", { t_id })
        .then((ret) => {
          this.lis = ret.data.project;
          this.Mycollect = ret.data.collect;
          this.allDataLenght = ret.data.dataLength;
          this.lis.forEach((e1, v1) => {
            this.Mycollect.forEach((e2) => {
              if (e1.id == e2.c_project) {
                this.lis[v1].collect = 1;
              }
            });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //切换页数获取数据
    handleCurrentChange(val) {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post("http://localhost:3000/student/projectCenterYe", {
          s_id,
          val,
          keyWord: this.yeKeyWord,
        })
        .then((ret) => {
          console.log(ret);
          this.lis = ret.data.project;
          this.Mycollect = ret.data.collect;
          this.lis.forEach((e1, v1) => {
            this.Mycollect.forEach((e2) => {
              if (e1.id == e2.c_project) {
                this.lis[v1].collect = 1;
              }
            });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索
    secProject() {
      this.loading=true;
      this.yeKeyWord == this.sec;
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post("http://localhost:3000/student/projectCenterSecKeyword", {
          s_id,
          keyWord: this.sec,
        })
        .then((ret) => {
          this.lis = ret.data.project;
          this.Mycollect = ret.data.collect;
          this.allDataLenght = ret.data.dataLength;
          this.lis.forEach((e1, v1) => {
            this.Mycollect.forEach((e2) => {
              if (e1.id == e2.c_project) {
                this.lis[v1].collect = 1;
              }
            });
          });
          this.loading=false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickNav(key) {
      console.log(key);
    },
    //写留言
    writeLeaveWord() {
       if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
      var token = localStorage.getItem("token");
      var u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      var w_time = new Date().toLocaleString();
      axios
        .post(`http://localhost:3000/student/writeLeaveWord`, {
          u_id,
          w_main: this.form.leaveWord,
          w_time,
          w_type: 1,
          w_to: this.leaveWordProjectId,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "留言成功",
              type: "success",
            });
            this.cancelWriteLeaveWord();
          }
        });
        }
    },
    //取消写留言
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
  },
};
</script>

<style scoped>
.sec {
  padding-top: 10px;
}
.sec > input {
  width: 300px;
  height: 40px;
  font: 16px/40px "";
  vertical-align: top;
  padding-left: 10px;
  border: 0px;
  border-radius: 20px 0 0 20px;
  border-right: 0;
  margin-right: -5px;
}
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
}
.home_list {
  width: 100%;
  height: 88%;
}
.nullList {
  width: 100%;
  height: 50%;
  padding-top: 30%;
  text-align: center;
  font-size: 30px;
}
</style>
